<template>
    <div>
        <div class="hotline">热搜榜</div>
        <div v-for="(item, index) in hotlist" class="hotline" @click="gosearchresultshow(item.searchWord)">
            {{ index + 1 }} {{ item.searchWord }}
        </div>


    </div>
</template>


<script setup>
import { hotsearch } from '../../api/discovery'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const hotlist = ref('');
const router = useRouter()
const gethotlist = async () => {
    let data = await hotsearch()
    hotlist.value = data.data
}
onMounted(() => {
    gethotlist()
})
const gosearchresultshow = (item) => {
    console.log(item)
    router.push({
        name: 'searchresultshow',
        query: {
            keyword: item
        }

    })
}
</script>

<style scoped lang="less">
.hotline {
    padding: 20px;

    background-color: white;


}

.hotline:hover {
        background-color: #f5f5f5 !important;
    }

</style>